// 获取 tbody 标签
const tbody = document.querySelector(".nav tbody");

// 后端 api 接口的地址
const apiUrl = "http://localhost:8000";

// 渲染老师列表
function getTeachers() {
  // 异步请求
  setTimeout(() => {
    // fetch 请求
    fetch(`${apiUrl}/teachers`, {
      // 请求方法
      method: "get",
      // 请求头
      headers: { "Content-Type": "Authorization" },
    })
      .then((response) => {
        // 如果状态码 200 则响应成功
        if (response.status === 200) {
          // 解析响应体为 JSON
          return response.json();
        }
        // 否则 抛出异常及当前状态码
        throw new Error(`HTTP error! Status: ${response.status}`);
      })
      .then((data) => {
        // 查询到的老师列表
        const teachers = data.map((teacher) => {
          return `
                 <tr>
                    <td>${teacher.id}</td>
                    <td>${teacher.teacherName}</td>
                    <td>${teacher.teacherAge}</td>
                    <td>${teacher.teacherSex}</td>
                    <td>${teacher.phone}</td>
                    <td>${teacher.className}</td>
                    <td>
                        <input type="button" value="修改" data-studentId='${teacher.id}' />
                        <input type="button" value="删除" data-studentId='${teacher.id}' />
                    </td>
                </tr>
            `;
        });

        // 表格标题
        const title = `
         <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>联系方式</th>
            <th>教学班级</th>
            <th>操作</th>
        </tr>  
      `;

        // 重新把查询的数据显示在页面上
        tbody.innerHTML = title + teachers.join("");
      })
      .catch((error) => {
        console.error(error);
      });
  }, 100);
}

// 查询所有老师信息
getTeachers();
